<template>
  <li class="menu-item"
    :style="paddingStyle"
    @click="handleClick"
    :class="{
      'is-active': active,
      'is-disabled': disabled
    }">
    <div v-if="$parent === rootMenu && rootMenu.collapse" @mouseover="handleTooltip" @mouseleave="handleTooltip">
      <div v-if="tooltipShow" style="position: absolute;left: 50px;top: 0;height: 100%;width: 100%;display: inline-block;box-sizing: border-box;padding: 0 20px;"><slot name="title"></slot></div>
      <div style="position: absolute;left: 3px;top: 0;height: 100%;width: 100%;display: inline-block;box-sizing: border-box;padding: 0 20px;">
        <slot></slot>
      </div>
    </div>
    <template v-else>
      <slot></slot>
      <slot name="title"></slot>
    </template>
  </li>
</template>
<script>
  import Menu from './menu-mixin'
  import Emitter from '../utils/emitter'
//  import ElTooltip from '../../tooltip'

  export default {
    name: 'MenuItems',

    componentName: 'MenuItems',
    mixins: [Menu, Emitter],
    components: {
//      ElTooltip
    },
    props: {
      index: {
        type: String,
        required: true
      },
      route: {
        type: Object,
        required: false
      },
      disabled: {
        type: Boolean,
        required: false
      }
    },
    computed: {
      active () {
        return this.index === this.rootMenu.activedIndex
      }
    },
    data () {
      return {
        tooltipShow: false
      }
    },
    methods: {
      handleClick () {
        this.dispatch('NavMenu', 'item-click', this)
        this.$emit('click', this)
      },
      handleTooltip () {
        this.tooltipShow = !this.tooltipShow
      }
    },
    created () {
      this.parentMenu.addItem(this)
      this.rootMenu.addItem(this)
    },
    beforeDestroy () {
      this.parentMenu.removeItem(this)
      this.rootMenu.removeItem(this)
    }
  }
</script>

<style lang="scss">
  @import "../css/main";

</style>
